<script>
import { computed, reactive, ref, defineComponent, onMounted, onUnmounted } from 'vue-demi';
import $store from "@/store/index";//引入VUEX
import main from "../main";//main.ts文件中要暴露app
import { getOptions, setTopics } from "@/utils/mqttConfig.js"
import mqtt from 'mqtt'//引入mqtt
//mqtt链接地址
let mqttUrl = 'ws://broker.emqx.io:8084'
export default defineComponent({
  name: 'msgDisplay',
  setup() {
    onMounted(() => {
      //mqtt连接
      main.config.globalProperties.$mqtt = mqtt.connect(mqttUrl, getOptions())
      //设置订阅主题
      setTopics()
      //启动mqtt状态监听
      $store.commit('MQTT_SERVICE')
    })

    onUnmounted(() => {
      $store.commit('MQTT_CLOSE') //断开mqtt
    })

    return {}
  }
})
</script>
